<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="../../public/js/paho-mqtt.js"></script>
        <script type="text/javascript" src="../../public/js/display_copy.js"></script>
        <script src="../../public/js/echarts.js"></script>
        <script src="../../public/js/display.js"></script>
        <script src="../../public/js/display.js"></script>
        <link rel="stylesheet" type="text/css" href="../../public/css/example.css">
        <link rel="stylesheet" type="text/css" href="../../public/layui/css/layui.css" media="all">
        <style>
            img {
                display: block;
            }
            /* #ledDisplay, #settings, #alarm, #realtimeCurve{margin: 10 auto; width: 600px; height: 400px;} */
            /** {padding: 5px; margin: 0;}*/
            /* 液晶显示背景 */
            .led{background-color: #242424; width: 100%; height: 300px; float: left; margin: 0px; padding: 0px;}
            /* 状态栏显示 */
            .ledState{color: #ffffff; width: 100%; height: 18%; font-size: 100%; text-align: center;}
            /* 安全温度及设定时间 */
            .ledSafeTimeVal{color: #ffffff; width: 100%; height: 20%; font-size: 100%; text-align: right;}
            .ledSafeVal{width: 48%; height: 100%; float: left; margin: 0px; padding: 0px; }
            .ledSafeValNum{width: 72%; height: 100%; float: left; font-size: 100%;}
            .ledTimeVal{width: 48%; height: 100%; float: right; margin: 0px; padding: 0px; }
            .ledTimeValNum{width: 70%; height: 100%; float: right; font-size: 100%;}
            /* 实时显示数据 */
            .ledChangingVal{color: #ffffff; width: 100%; height: 40%; font-size: 150%; text-align: right;}
            .ledChangingTempVal{width: 48%; height: 100%; float: left; margin: 0px; padding: 0px;}
            .ledChangingTempValNum{width: 72%; height: 100%; float: left; font-size: 150%;}
            .ledChangingSpeedVal{width: 50%; height: 100%; float: right; margin: 0px; padding: 0px;}
            .ledChangingSpeedValNum{width: 63%; height: 100%; float: left; font-size: 150%;}
            /* 设定值显示 */
            .ledSetVal{color: #b89602; width: 100%; height: 20%; font-size: 100%; text-align: right;}
            .ledSetTempVal{width: 48%; height: 100%; float: left; margin: 0px; padding: 0px; }
            .ledSetTempValNum{width: 72%; height:100%; float: left; font-size: 100%; }
            .ledSetSpeedVal{width: 50%;height: 100%; float: right; margin: 0px; padding: 0px; }
            .ledSetSpeedValNum{width: 63%; height: 100%; float: left; font-size: 100%; }
            /* 启停按钮和文字 */
            /* .btn{padding: 20px; background: url(buttonRunStop.png) 60px 60px no-repeat;} */
            #knob{float:left; width: 120px; height: 120px; margin: 20px; padding: 20px; }
            #knobPic{height: 100px; width: 100px; float: right; }
            #knobChar{text-align: center;}
            /* led字体显示 */
            .degree{float: left; text-align: center;}
            .rpm{float: left; text-align: center;}
            .sandclock{width: 15%; height: 100%; float: left; text-align: center;background: url('../../public/imgs/timer.png') center center no-repeat; background-size: 100%; }
            /*#settings{float: left; width: 600px; height: 400px;margin: 0 auto; border: 3px solid #000;}*/
            /*#alarm{float: left; width: 600px; height: 400px;margin: 0 auto; border: 3px solid #000;}*/
            .curve{float: left; width: 100%; height: 300px; margin: 0 auto; border: 0px solid #000000;}
        </style>
        <!-- <link href="../../public/css/led.css" rel="stylesheet" />  -->
        <!-- <script type="text/javascript" src="../js/redis_util.js"></script> -->
    </head>
    <body>
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item layui-this"><a href="">首页</a></li>
        <li class="layui-nav-item"><a href="">添加设备</a></li>
        <li class="layui-nav-item"><a href="">其他</a></li>
    </ul>

    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function(){
            var element = layui.element;

            //…
        });
    </script>
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">实时数据</li>
                <li >参数设置</li>
                <li>实时曲线</li>
                <li>设备告警</li>
            </ul>
            <div class="layui-tab-content" style="height: 60px;">
                <div class="layui-tab-item layui-show">
                    <blockquote class="layui-elem-quote">注意：</blockquote>
                    <div id="ledDisplay" class="led" >
                        <!-- 液晶显示部分 -->
                        <div id="state" class="ledState">
                            <!-- 状态显示部分 -->
                        </div>
                        <!-- 第二排，显示安全温度和设定时间 -->
                        <div class="ledSafeTimeVal">
                            <div class="ledSafeVal">
                                <div  id="safeTemp" class="ledSafeValNum">
                                    <!-- 安全温度 -->
                                </div>
                                <div class="degree">
                                    ℃
                                </div>
                            </div>
                            <div class="ledTimeVal">
                                <div class="sandclock" ></div>
                                <div id="time" class="ledTimeValNum">
                                    <!-- 设定时间 -->
                                </div>
                            </div>
                        </div>
                        <!-- 第三排，显示实时温度和速度 -->
                        <div class="ledChangingVal">
                            <div class="ledChangingTempVal">
                                <div id="temp" class="ledChangingTempValNum">
                                    <!-- 实时温度 -->
                                </div>
                                <div class="degree">
                                    ℃
                                </div>
                            </div>
                            <div class="ledChangingSpeedVal">
                                <div id="speed" class="ledChangingSpeedValNum">
                                    <!-- 实时转速 -->
                                </div>
                                <div class="rpm">
                                    rpm
                                </div>
                            </div>
                        </div>
                        <!-- 第四排，显示设定温度和速度 -->
                        <div class="ledSetVal">
                            <div class="ledSetTempVal">
                                <div id="setTemp" class="ledSetTempValNum">
                                    <!-- 显示设定温度 -->
                                </div>
                                <div class="degree">
                                    ℃
                                </div>
                            </div>
                            <div class="ledSetSpeedVal">
                                <div id="setSpeed" class="ledSetSpeedValNum">
                                    <!-- 显示设定转速 -->
                                </div>
                                <div class="rpm">
                                    rpm
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="knobPic" >
                        <script>
                            // function 启动停止
                            function btnRunStop(){
                                //点击启动停止接口
                                alert("hello");
                            };
                        </script>
                        <img src="../../public/html/buttonRunStop.png" alt="启动/停止" width="100px" height="100px"  id="btnRunStop" onclick="btnRunStop()">
                    </div>
<!--                    <button type="button" class="layui-btn" style="margin: 10px;float: right">-->

<!--                        Start / Stop-->
<!--                    </button>-->
<!--                    <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>-->
                </div>
                <div class="layui-tab-item">
                    <blockquote class="layui-elem-quote">注意：</blockquote>
                    <div class="layui-row layui-col-space20">
                        <div class="layui-col-xs12 layui-col-space10">
                            <div class="layui-row grid-demo">
                                <div class="layui-col-xs12">
                                    <form class="layui-form layui-form-pane" action="" >
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">设置温度</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="temp" required  lay-verify="required" placeholder="请输入温度值" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">设置速度</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="speed" required  lay-verify="required" placeholder="请输入速度值" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">设置小时</label>
                                            <div class="layui-input-block">
                                                <input type="text" class="layui-input" id="timeHours" placeholder="请输入小时值">
<!--                                                <span class="layui-badge layui-bg-orange">小时</span>-->
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">设置分钟</label>
                                            <div class="layui-input-block">
                                                <input type="text" class="layui-input" id="timeMinuts" placeholder="请输入分钟值">
<!--                                                <span class="layui-badge layui-bg-orange">分钟</span>-->
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-block">
                                                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                    <script src="../../public/layui/layui.all.js">
                        //Demo
                        layui.use('form', function(){
                            var form = layui.form;

                            //监听提交
                            form.on('submit(formDemo)', function(data){
                                layer.msg(JSON.stringify(data.field));
                                return false;
                            });
                        });
                    </script>
                </div>
                <div class="layui-tab-item">
                    <blockquote class="layui-elem-quote">注意：</blockquote>
                    <div id="tempCurve" title="shishi" class="curve"></div>
                    <div id="speedCurve" title="shishi" class="curve"></div>
                    <script type="text/javascript">
                        let temp = echarts.init(document.getElementById('tempCurve'));
                        let speed = echarts.init(document.getElementById('speedCurve'));
                    </script>
                </div>

                <div class="layui-tab-item">
                    <blockquote class="layui-elem-quote">注意：</blockquote>
                    <div class="layui-btn layui-btn-lg layui-btn-danger" style="margin: 3px;">&nbsp;&nbsp;&nbsp;内部传感器故障&nbsp;&nbsp;&nbsp;</div>

<!--                    <a href="" class="weui-grid">-->
<!--                        <div class="weui-grid__icon">-->
<!--                            <div id="err0" ></div>-->
<!--                            <script type="text/javascript">-->
<!--                                if (errorInfo.inner_sensor_err === 0) {-->
<!--                                    document.getElementById("err0").innerHTML=statusPic.good;-->
<!--                                } else {-->
<!--                                    document.getElementById("err0").innerHTML=statusPic.err;-->
<!--                                }-->
<!--                            </script>-->
<!--                        </div>-->
<!--                        <p class="weui-grid__label">内部传感器</p>-->
<!--                        <p class="weui-grid__label">故障</p>-->
<!--                    </a>-->
<!--                    <a href="" class="weui-grid">-->
<!--                        <div class="weui-grid__icon">-->
<!--                            <div id="err1"></div>-->
<!--                            <script type="text/javascript">-->
<!--                                if (errorInfo.inner_sensor_temp_alarm === 0) {-->
<!--                                    document.getElementById("err1").innerHTML=statusPic.good;-->
<!--                                } else {-->
<!--                                    document.getElementById("err1").innerHTML=statusPic.err;-->
<!--                                }-->
<!--                            </script>-->
<!--                        </div>-->
<!--                        <p class="weui-grid__label">内部传感器</p>-->
<!--                        <p class="weui-grid__label">温度报警</p>-->
<!--                    </a>-->
<!--                    <a href="" class="weui-grid">-->
<!--                        <div class="weui-grid__icon">-->
<!--                            <div id="err2"></div>-->
<!--                            <script type="text/javascript">-->
<!--                                if (errorInfo.external_sensor_err === 0) {-->
<!--                                    document.getElementById("err2").innerHTML=statusPic.good;-->
<!--                                } else {-->
<!--                                    document.getElementById("err2").innerHTML=statusPic.err;-->
<!--                                }-->
<!--                            </script>-->
<!--                        </div>-->
<!--                        <p class="weui-grid__label">外部传感器</p>-->
<!--                        <p class="weui-grid__label">故障</p>-->
<!--                    </a>-->
<!--                    <a href="" class="weui-grid">-->
<!--                        <div class="weui-grid__icon">-->
<!--                            <div id="err3"></div>-->
<!--                            <script type="text/javascript">-->
<!--                                if (errorInfo.external_sensor_over_temp === 0) {-->
<!--                                    document.getElementById("err3").innerHTML=statusPic.good;-->
<!--                                } else {-->
<!--                                    document.getElementById("err3").innerHTML=statusPic.err;-->
<!--                                }-->
<!--                            </script>-->
<!--                        </div>-->
<!--                        <p class="weui-grid__label">外部传感器</p>-->
<!--                        <p class="weui-grid__label">超温</p>-->
<!--                    </a>-->
<!--                    <a href="" class="weui-grid">-->
<!--                        <div class="weui-grid__icon">-->
<!--                            <div id="err4"></div>-->
<!--                            <script type="text/javascript">-->
<!--                                if (errorInfo.mechanical_limit_temp_over_temp === 0) {-->
<!--                                    document.getElementById("err4").innerHTML=statusPic.good;-->
<!--                                } else {-->
<!--                                    document.getElementById("err4").innerHTML=statusPic.err;-->
<!--                                }-->
<!--                            </script>-->
<!--                        </div>-->
<!--                        <p class="weui-grid__label">机械限温</p>-->
<!--                        <p class="weui-grid__label">超温</p>-->
<!--                    </a>-->
<!--                    <a href="" class="weui-grid">-->
<!--                        <div class="weui-grid__icon">-->
<!--                            <div id="err5"></div>-->
<!--                            <script type="text/javascript">-->
<!--                                if (errorInfo.mechanical_limit_sensor_err === 0) {-->
<!--                                    document.getElementById("err5").innerHTML=statusPic.good;-->
<!--                                } else {-->
<!--                                    document.getElementById("err5").innerHTML=statusPic.err;-->
<!--                                }-->
<!--                            </script>-->
<!--                        </div>-->
<!--                        <p class="weui-grid__label">机械限温</p>-->
<!--                        <p class="weui-grid__label">故障</p>-->
<!--                    </a>-->
<!--                    <a href="" class="weui-grid">-->
<!--                        <div class="weui-grid__icon">-->
<!--                            <div id="err6"></div>-->
<!--                            <script type="text/javascript">-->
<!--                                if (errorInfo.motor_stalling === 0) {-->
<!--                                    document.getElementById("err6").innerHTML=statusPic.good;-->
<!--                                } else {-->
<!--                                    document.getElementById("err6").innerHTML=statusPic.err;-->
<!--                                }-->
<!--                            </script>-->
<!--                        </div>-->
<!--                        <p class="weui-grid__label">电机堵转</p>-->
<!--                        <p class="weui-grid__label"> &nbsp</p>-->
<!--                    </a>-->
<!--                    <a href="" class="weui-grid">-->
<!--                        <div class="weui-grid__icon">-->
<!--                            <div id="err7"></div>-->
<!--                            <script type="text/javascript">-->
<!--                                if (errorInfo.external_sensor_drop === 0) {-->
<!--                                    document.getElementById("err7").innerHTML=statusPic.good;-->
<!--                                } else {-->
<!--                                    document.getElementById("err7").innerHTML=statusPic.err;-->
<!--                                }-->
<!--                            </script>-->
<!--                        </div>-->
<!--                        <p class="weui-grid__label">外部传感器</p>-->
<!--                        <p class="weui-grid__label">跌落</p>-->
<!--                    </a>-->
<!--                    <a href="" class="weui-grid">-->
<!--                        <div class="weui-grid__icon">-->
<!--                            <div id="err9"></div>-->
<!--                            <script type="text/javascript">-->
<!--                                if (errorInfo.external_sensor_not_plugged === 0) {-->
<!--                                    document.getElementById("err9").innerHTML=statusPic.good;-->
<!--                                } else {-->
<!--                                    document.getElementById("err9").innerHTML=statusPic.err;-->
<!--                                }-->
<!--                            </script>-->
<!--                        </div>-->
<!--                        <p class="weui-grid__label">外部传感器</p>-->
<!--                        <p class="weui-grid__label">未插入</p>-->
<!--                    </a>-->
<!--                    <a href="" class="weui-grid">-->
<!--                        <div class="weui-grid__icon">-->
<!--                            <div id="err8"></div>-->
<!--                            <script type="text/javascript">-->
<!--                                if (errorInfo.end_of_time === 0) {-->
<!--                                    document.getElementById("err8").innerHTML=statusPic.good;-->
<!--                                } else {-->
<!--                                    document.getElementById("err8").innerHTML=statusPic.err;-->
<!--                                }-->
<!--                            </script>-->
<!--                        </div>-->
<!--                        <p class="weui-grid__label">超时告警</p>-->
<!--                        <p class="weui-grid__label">&nbsp;</p>-->
<!--                    </a>-->
                </div>
            </div>
        </div>



<!--        <div id="setting">-->
<!--            <div id="knob">-->
<!--                &lt;!&ndash; 大旋钮 &ndash;&gt;-->
<!--                &lt;!&ndash; knobRunStop &ndash;&gt;-->

<!--                <div id="knobChar">-->
<!--                    Run/Stop-->
<!--                </div>-->
<!--            </div>-->
<!--            <div>-->
<!--                    设定时间:<input type="text" name="setTime" placeholder="请输入设定时间">-->
<!--            </div>-->
<!--            <div >-->
<!--                    设定温度:<input type="text" name="setTemp" placeholder="请输入设定温度值">-->
<!--            </div>-->
<!--            <div>-->
<!--                    设定转速:<input type="text" name="setSpeed" placeholder="请输入设定转速值">-->
<!--            </div>-->
<!--&lt;!&ndash;            <div>&ndash;&gt;-->
<!--&lt;!&ndash;                <button onclick="submit()" >长按锁定</button>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--            <div id="submitSetting">-->
<!--                <button onclick="submit()" >提交</button>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div id="alarm" >-->
<!--            报警界面-->
<!--        </div>-->

    </body>
</html>